
<template>
    <div class="search" style="text-align: left;margin-right: 20px;" >
        <a-cascader
            :options="options"
            :load-data="loadData"
            placeholder="选择单元簇"
            change-on-select
            @change="onChange"
          />
<!--        <a-select placeholder="选择站点" style="width: 130px;margin-right: 20px;" @change="handleChange($event,'esStations_id',1)">
          <a-select-option :value="item.id" v-for="(item,index) in esStations">
            {{item.name}}
          </a-select-option>
        </a-select> -->
        <!-- <a-range-picker
          format="YYYY-MM-DD "
          style="margin-right: 20px;width: 220px;"
          :placeholder="['开始时间', '结束时间']"
          @change="onChange"
          @ok="onOk"
        /> -->
<!--        <a-select v-if="esStations_id && esUnits_id!=null" placeholder="选择单元" style="width: 130px;margin-right: 20px;" @change="handleChange($event,'esUnits_id',2)">
          <a-select-option :value="item.id" v-for="(item,index) in esUnits">
            {{item.name}}
          </a-select-option>
        </a-select>
        <a-select v-if='level==3 && esUnits_id && esClusters_id!=null' placeholder="选择簇" style="width: 130px;margin-right: 20px;" @change="handleChange($event,'esClusters_id',3)">
          <a-select-option :value="item.id" v-for="(item,index) in esClusters">
            {{item.name}}
          </a-select-option>
        </a-select> -->
    </div>
</template>

<script>
    import { gets} from "../../services/index.js";
    export default {
        data() {
            return {
                esStations:[],
                esStations_id:'',
                esUnits:[],
                esUnits_id:'',
                esClusters:[],
                esClusters_id:'',
                options:[]
            }
        },
        props: {
            level : {
                type: Number,
                default: 3
            },
        },
        created() {
          gets({limit:99},'esStations').then(({ data }) => {
              if (data.code == 20000) {
                  let res = data.data;
                  this.options = res.data.map(e=>{
                      return {
                          value:e.id,
                          label:e.name,
                          isLeaf: false,
                      }
                  })
              }
          });
        },
        methods: {
            onChange(value) {
                  console.log();
                  this.$emit('change',value)
            },
            loadData(selectedOptions) {
              const targetOption = selectedOptions[selectedOptions.length - 1];
              targetOption.loading = true;
              // load options lazily
              if(selectedOptions.length==1){
                  this.getSearchList('esUnits','esUnits',this.level==3?0:1,targetOption)
                  this.esUnits_id = null
                  this.esClusters_id = null
                  setTimeout(()=> {
                      this.esUnits_id = ''
                      this.esClusters_id = ''
                  }, 10);
              }else if(selectedOptions.length==2){
                  if(this.$props.level==3){
                    this.getSearchList('esClusters','esClusters',1,targetOption)
                    this.esClusters_id = null
                    setTimeout(()=> {
                        this.esClusters_id = ''
                    }, 10);
                  }else{
                      
                  }
              }else if(selectedOptions.length==3){
                  
              }
            },
            handleChange(e,name,type){
              console.log(e,name);
              this[name] = e
              if(type==1){
                  this.getSearchList('esUnits','esUnits',0)
                  this.esUnits_id = null
                  this.esClusters_id = null
                  setTimeout(()=> {
                      this.esUnits_id = ''
                      this.esClusters_id = ''
                  }, 10);
              }else if(type==2){
                  if(this.$props.level==3){
                    this.getSearchList('esClusters','esClusters',1)
                    this.esClusters_id = null
                    setTimeout(()=> {
                        this.esClusters_id = ''
                    }, 10);
                  }else{
                      
                  }
              }else if(type==3){
                  
              }
              this.$emit('change',[this.esStations_id || '',this.esUnits_id || '',this.esClusters_id || ''])
            },
            getSearchList(url,name,s,targetOption){
                let _this = this 
                let sid = s==1?'e_s_station_id':'e_s_unit_id'
                gets({limit:99,searchFields: `${sid}:=`,search: `${sid}:${targetOption.value}`},url).then(({ data }) => {
                    if (data.code == 20000) {
                        let res = data.data;
                        targetOption.loading = false;
                        if(res.data.length<1){
                            targetOption.isLeaf=true
                        }else{
                            targetOption.children = res.data.map(e=>{
                                console.log(s);
                                return {
                                    value:e.id,
                                    label:e.name,
                                    isLeaf: s==1?true:false
                                }
                            })
                            _this.options = [..._this.options];
                        }
                    }
                });
            },
        },
    }
</script>

<style lang="less">
</style>
